<template>
  <div>
    <div style="margin-top: 2%;text-align:center;">
      <span>请选择学期 : </span>
      <el-select  v-model="form.termId"
                  style="width: 16%;margin-right: 1%"
                  clearable filterable
                  placeholder="请选择学期(非必选项)">
        <el-option v-for="item in terms" :key="item.termId"
                   :label="item.termName" :value="item.termId">
        </el-option>
      </el-select>
      <span>请选择课程 : </span>
      <el-select  v-model="form.courseId"
                  style="width: 24%;margin-right: 1%"
                  clearable filterable
                  placeholder="请选择课程(非必选项)">
        <el-option v-for="item in course" :key="item.courseId"
                   :label="item.courseId +' - '+ item.courseName"
                   :value="item.courseId">
        </el-option>
      </el-select>
      <el-button @click="findGrade()" style="font-size: 20px;" type="primary">立即查询成绩</el-button>
    </div>
    <div style="margin-top: 1.6%;">
      <div v-for="item in pageInfo.list" :key="item.id">
        <el-card class="box-card" style="margin:0 auto;width: 54%">
          <!--卡片标题-->
          <div slot="header" class="clearfix" @click="getOneGrade(item)">
            <span>课程名称 : {{item.course.courseName}}</span>
            <span style="margin-left: 12%">
                            学分 : {{item.course.credit}} / 学时 : {{item.course.period}}
                        </span>
            <div style="float: right;">点击卡片查看成绩详情</div>
          </div>
          <!--卡片内容-->
          <div @click="getOneGrade(item)">
            <div>
                            <span v-if="parseInt(item.score) >= parseInt(item.teachTask.passingScore)"
                                  style="color: #67C23A;font-size:26px;font-weight: bold">
                            你的成绩 : {{item.score}} / 满分: {{item.teachTask.fullScore}}</span>
              <span v-if="parseInt(item.score) < parseInt(item.teachTask.passingScore)"
                    style="color: #F56C6C;font-size:26px;font-weight: bold">
                            你的成绩 : {{item.score}} / 及格成绩: {{item.teachTask.passingScore}}</span>
              <span style="float: right;">考核方式 : {{item.teachTask.method}}</span>
            </div>
            <div style="margin-top: 0.8%;">
              <span>课程类型 : {{item.course.typeName}}</span>
              <span style="margin-left: 12%"/>
              <span>课程属性 : </span>
              <span v-if="item.course.flag===1" style="color: #F56C6C;">必修</span>
              <span v-if="item.course.flag===2" style="color: #5CB87A;">选修</span>
              <span v-if="item.course.flag===3" style="color: #409EFF;">限选</span>
            </div>
            <div style="margin-top: 0.8%;">
              <span>授课教师 : </span>
              <span style="font-weight: bold">{{item.teacher.teacherName}}</span>
              <span> 老师</span>
            </div>
          </div>
        </el-card>
        <div style="margin-top: 0.8%;"/>
      </div>
      <el-pagination
          style="text-align: center;"
          background
          layout="total,prev, pager, next"
          :total="pageInfo.total"
          :page-size="pageInfo.pageSize"
          @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <!--成绩详情-->
    <el-dialog title="成绩详情" :visible.sync="dialogForm" width="54%">
      <el-card style="margin:0 auto;width: 96%;">
        <div style="text-align: center;">
          <span style="font-size:20px;margin-right: 1%">课程名称 : </span>
          <span style="font-size:30px;font-weight: bold;margin-right: 2%">{{details.course.courseName}}</span>
        </div>
        <div style="text-align: center;">
          <span style="font-size:18px;margin-right: 1%">课程属性 : </span>
          <span v-if="details.course.flag===1" style="color: #F56C6C;font-weight: bold">必修</span>
          <span v-if="details.course.flag===2" style="color: #5CB87A;font-weight: bold">选修</span>
          <span v-if="details.course.flag===3" style="color: #409EFF;font-weight: bold">限选</span>
          <span style="margin-left: 2%;font-size:16px;">
                        (学分 : {{details.course.credit}} / 学时 : {{details.course.period}})</span>
        </div>
        <div style="margin-top: 2%;"/>
        <div style="text-align: center;margin:0 auto;width: 92%">
          <span style="float: left;">类型 : {{details.course.typeName}}</span>
          <span style="color: #409eff">考核方式 : {{details.teachTask.method}}</span>
          <div style="float: right;">
            <span>授课教师 : </span>
            <span style="font-weight: bold">{{details.teacher.teacherName}}</span>
            <span> 老师</span>
          </div>
        </div>
        <div style="text-align: center;margin-top: 2%">
                    <span v-if="parseInt(details.score) >= parseInt(details.teachTask.passingScore)"
                          style="color: #67C23A;font-size:32px;font-weight: bold">
                            你的成绩 : {{details.score}} / 满分: {{details.teachTask.fullScore}}</span>
          <span v-if="parseInt(details.score) < parseInt(details.teachTask.passingScore)"
                style="color: #F56C6C;font-size:32px;font-weight: bold">
                            你的成绩 : {{details.score}} / 及格成绩: {{details.teachTask.passingScore}}</span>
        </div>
        <div style="text-align: center;margin-top: 2%">
          <span>满分 : {{details.teachTask.fullScore}} , </span>
          <span>及格成绩 : {{details.teachTask.passingScore}} , </span>
          <span v-if="parseInt(details.teachTask.finalPct)>0">
                        期末成绩 : {{details.gradeTemp.finalScore}}({{details.teachTask.finalPct}}%)
                    </span>
        </div>
        <div style="text-align: center;">
                    <span v-if="parseInt(details.teachTask.usualPct)>0">
                        平时成绩: {{details.gradeTemp.usualScore}}({{details.teachTask.usualPct}}%) ,
                    </span>
          <span v-if="parseInt(details.teachTask.expPct)>0">
                        实践成绩: {{details.gradeTemp.expScore}}({{details.teachTask.expPct}}%) ,
                    </span>
          <span v-if="parseInt(details.teachTask.midPct)>0">
                        期中成绩: {{details.gradeTemp.midScore}}({{details.teachTask.midPct}}%) ,
                    </span>
          <span v-if="parseInt(details.teachTask.otherPct)>0">
                        其它成绩: {{details.gradeTemp.otherScore}}({{details.teachTask.otherPct}}%)
                    </span>
        </div>
        <div style="text-align: center;margin-top: 1%">
          <div>
            <span style="color: #67C23A;font-size:26px;font-weight: bold">{{details.ranking}}</span>
          </div>
          <div>
            <span style="color: #67C23A;font-size:26px;font-weight: bold">{{details.overPct}}</span>
          </div>
          <div>
            <span style="color: #67C23A;font-size:26px;font-weight: bold">{{details.suggest}}</span>
          </div>
        </div>
        <div style="text-align: center;margin-top: 1%">
          <el-table
              v-if="details.subScoresList != null && details.subScoresList.length > 0"
              :data="subScores"
              border style="width: 100%">
            <el-table-column fixed width="1">
            </el-table-column>
            <el-table-column label="你该科课程的子成绩(见右侧)" width="200">
              <template>
                <span>你的成绩(见右侧)</span>
              </template>
            </el-table-column>
            <el-table-column
                width="200"
                v-for="item in details.subScoresList" :key="item.subProjectId"
                :label="item.subName">
              <template>
                <span>{{item.subScore}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!--申诉记录-->
        <div style="text-align: center;margin-top: 2%">
          <el-table
              v-if="details.appealList != null && details.appealList.length > 0"
              :data="details.appealList"
              border style="width: 100%">
            <el-table-column fixed width="150" label="该科成绩的申诉记录">
              <template slot-scope="scope">
                <el-button @click="viewAppeal(scope.row)" type="primary">
                  查看申诉详情
                </el-button>
              </template>
            </el-table-column>
            <el-table-column width="100" label="申诉前成绩">
              <template slot-scope="scope">
                <span>{{scope.row.originalGrade}}</span>
              </template>
            </el-table-column>
            <el-table-column width="120" label="处理后成绩">
              <template slot-scope="scope">
                <span v-if="scope.row.nowGrade != null">{{scope.row.nowGrade}}</span>
                <span v-if="scope.row.nowGrade == null">暂时不变</span>
              </template>
            </el-table-column>
            <el-table-column width="300" label="申诉状态">
              <template slot-scope="scope">
                <span v-if="scope.row.appealState === 0">申诉已被驳回,等待学生修改</span>
                <span v-if="scope.row.appealState === 1">学生已提交,等待教师处理</span>
                <span v-if="scope.row.appealState === 2">申诉已被驳回,等待教师处理</span>
                <span v-if="scope.row.appealState === 3">教师已处理,等待管理员审核</span>
                <span v-if="scope.row.appealState === 4">管理员审核通过,审核结束!</span>
                <span v-if="scope.row.appealState === 5">你的申诉已经被管理员终止!</span>
              </template>
            </el-table-column>
            <el-table-column width="260" label="本条申诉首次提交时间">
              <template slot-scope="scope">
                <span>{{scope.row.startTime}}</span>
              </template>
            </el-table-column>
            <el-table-column width="120" label="本人申诉理由">
              <template>
                <span>见详情</span>
              </template>
            </el-table-column>
            <el-table-column width="120" label="教师处理意见">
              <template>
                <span>见详情</span>
              </template>
            </el-table-column>
            <el-table-column width="160" label="进行审核的管理员">
              <template slot-scope="scope">
                <span>{{scope.row.adminName}}</span>
              </template>
            </el-table-column>
            <el-table-column width="120" label="管理员审核意见">
              <template>
                <span>见详情</span>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 1%;"/>
          <!--没有申诉记录或者申诉均已结束才能继续提交申诉-->
          <div v-if="details.appealList==null || details.appealList.length===0
                        || details.appealList[0].appealState===4 || details.appealList[0].appealState===5">
            <el-button @click="addNewAppeal()" type="primary">提交新的申诉</el-button>
          </div>
        </div>
      </el-card>
    </el-dialog>

    <el-dialog title="查看申诉详情" :visible.sync="seeAppeal" :before-close="handleClose">
      <el-card style="margin:0 auto;width: 96%;">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="30%">
          <el-form-item label="申诉前成绩">
            <span>{{ruleForm.originalGrade}}</span>
          </el-form-item>
          <div style="margin-bottom: 4%;"></div>
          <el-form-item label="更正成绩">
            <span v-if="parseInt(ruleForm.nowGrade)>0">{{ruleForm.nowGrade}}</span>
            <span v-if="ruleForm.nowGrade==null">暂无</span>
          </el-form-item>
          <div style="margin-bottom: 4%;"></div>
          <el-form-item label="首次提交时间">
            <span>{{ruleForm.startTime}}</span>
          </el-form-item>
          <div style="margin-bottom: 4%;"></div>
          <el-form-item label="申诉内容" prop="appealContent">
            <el-input type="textarea" style="width:60%" :autosize="{ minRows: 3}"
                      v-model="ruleForm.appealContent"></el-input>
          </el-form-item>
          <div style="margin-bottom: 4%;"></div>
          <el-form-item label="教师意见">
            <span style="color: #F56C6C;font-size: 18px">{{ruleForm.teacherOpinion}}</span>
          </el-form-item>
          <div style="margin-bottom: 4%;"></div>
          <el-form-item label="管理员意见">
            <span style="color: #409eff;font-size: 18px">{{ruleForm.adminOpinion}}</span>
          </el-form-item>
          <div style="margin-bottom: 4%;"></div>
          <el-form-item label="申诉状态">
            <span v-if="ruleForm.appealState === 0">申诉已被驳回,等待学生修改</span>
            <span v-if="ruleForm.appealState === 1">学生已提交,等待教师处理</span>
            <span v-if="ruleForm.appealState === 2">申诉已被驳回,等待教师处理</span>
            <span v-if="ruleForm.appealState === 3">教师已处理,等待管理员审核</span>
            <span v-if="ruleForm.appealState === 4">管理员审核通过,审核结束!</span>
            <span v-if="ruleForm.appealState === 5">你的申诉已经被管理员终止!</span>
          </el-form-item>
          <el-form-item>
            <div v-if="ruleForm.appealState === 0 || ruleForm.appealState === 1">
              <el-button type="primary" style="font-size: 20px"
                         @click="submitForm('ruleForm')">立即提交</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-card>
    </el-dialog>

    <el-dialog title="提交新的申诉" :visible.sync="addAppeal" :before-close="handleClose">
      <el-card style="margin:0 auto;width: 96%;">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="30%">
          <el-form-item label="当前成绩">
            <span>{{ruleForm.originalGrade}}</span>
          </el-form-item>
          <el-form-item label="申诉内容" prop="appealContent">
            <el-input type="textarea" style="width:60%" v-model="ruleForm.appealContent"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="font-size: 20px"
                       @click="submitForm('ruleForm')">立即提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return{
      dialogForm: false,
      seeAppeal: false,
      addAppeal: false,
      form:{
        termId: '',
        courseId:'',
        stuId: '',
      },
      terms:[],
      course:[],
      currPage: 1,
      pageInfo:{},
      details:{
        course:{},
        teachTask:{},
        teacher:{},
        gradeTemp:{},
      },
      subScores: [],//子成绩需要一个list
      ruleForm:{
        appealId:'',
        gradeId:'',
        startTime:'',
        originalGrade:'',
        appealContent:'',
        nowGrade:'',
        teacherOpinion:'',
        adminId:'',
        adminName:'',
        adminOpinion:'',
        appealState:'',
      },
      rules:{
        appealContent: [
          { required: true, message: '请输入申诉理由', trigger: 'blur' },
          { min: 2, max: 500, message: '请输入 2 到 500 个字符!', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.form.stuId = JSON.parse(sessionStorage.getItem("id"));
    this.termInit();
    this.courseInit();
    this.getData();
    this.subScores.push("");//子成绩的list需要展示一行数据
  },
  methods:{
    submitForm(formName){
      this.$refs[formName].validate((valid) => {//校验格式
        if (valid) {//格式校验通过
          let path = 'http://localhost:8081/appeal/stuUpdateAppeal';
          this.$ajax.post(path,this.ruleForm).then(res=>{
            if(res.data.status===0){
              this.$message.success(res.data.message);
              this.getOneGrade(this.details);//更新这条成绩详情
              this.seeAppeal = false;
              this.addAppeal = false;
            }
            else{
              this.$message.error(res.data.message);
            }
          })
        }
      });
    },
    getOneGrade(val){//查看一个成绩详情
      let path = 'http://localhost:8081/grade/getGradeDetails';
      this.$ajax.post(path,val).then(res=>{
        this.details = res.data.obj;
        this.dialogForm = true;
      })
    },
    getData(){//获取数据
      let path = `http://localhost:8081/grade/getStuGrades/${this.currPage}`;
      this.$ajax.post(path,this.form).then(res=>{
        this.pageInfo = res.data;
      })
    },
    termInit(){//初始化学期
      let path = 'http://localhost:8081/term/getTerms';
      this.$ajax.post(path).then(res=>{
        this.terms = res.data.list
      })
    },
    courseInit(){//初始化课程
      let path = 'http://localhost:8081/course/getCourses';
      this.$ajax.post(path).then(res=>{
        this.course = res.data.list
      })
    },
    viewAppeal(val){//查看申诉详情
      this.ruleForm.appealId = val.appealId;
      this.ruleForm.gradeId = val.gradeId;
      this.ruleForm.startTime = val.startTime;
      this.ruleForm.originalGrade = val.originalGrade;
      this.ruleForm.appealContent = val.appealContent;
      this.ruleForm.nowGrade = val.nowGrade;
      this.ruleForm.teacherOpinion = val.teacherOpinion;
      this.ruleForm.adminId = val.adminId;
      this.ruleForm.adminName = val.adminName;
      this.ruleForm.adminOpinion = val.adminOpinion;
      this.ruleForm.appealState = val.appealState;
      this.seeAppeal = true;
    },
    addNewAppeal(){//新增申诉
      this.ruleForm.appealId = null;
      this.ruleForm.gradeId = this.details.gradeId;
      this.ruleForm.startTime = null;
      this.ruleForm.originalGrade = this.details.score;
      this.ruleForm.appealContent = '';
      this.ruleForm.nowGrade = null;
      this.ruleForm.teacherOpinion = null;
      this.ruleForm.adminId = null;
      this.ruleForm.adminName = null;
      this.ruleForm.adminOpinion = null;
      this.ruleForm.appealState = '1';
      this.addAppeal = true;
    },
    findGrade(){//查找
      this.currPage = 1;
      this.getData();
    },
    handleCurrentChange(val){//翻页
      this.currPage = val;
      this.getData();
    },
    handleClose(done){
      this.$confirm('确认关闭?').then(()=>{
        done();
      })
    },
  }
}
</script>

<style scoped>
span{
  font-size: 22px;
}
</style>